<template>
<div>
  <div v-if="isMobile()">
    <a-carousel autoplay>
      <div style="height:160px;" v-for="arr in arr01">
        <img :src="arr" style="width:100%;height:100%;" >
      </div>
    </a-carousel>
  </div>
  <div style="padding-top: 5%; padding-bottom: 5%;height: 110px;background: url('/22.jpg') center center repeat " v-if="isMobile()">
    <div style="height: 80px;" align="center" v-has="'cont:professor'" >
      <div style="float: left;width: 33%;"><div class="daohang" style="" @click="changeRoute('post')"><svg class="icon" aria-hidden="true"><use xlink:href="#actionjishuzhuanjia"></use></svg><div style="margin-top: 5px">个人信息</div></div></div>
      <div style="float: left;width: 33%;"><div class="daohang" style="" align="center" @click="changeRoute('project')"><svg class="icon" aria-hidden="true"><use xlink:href="#actionxiangmu"></use></svg><div style="margin-top: 5px">我的项目</div></div></div>
      <div style="float: left;width: 33%;"><div class="daohang" style="" align="center" @click="changeRoute('leave')"><svg class="icon" aria-hidden="true"><use xlink:href="#actionqingjiashenqing"></use></svg><div style="margin-top: 5px">紧急请假</div></div></div>
    </div>
    <div style="height: 80px;" align="center" v-has="'cont:demoProfessor'" >
      <div style="float: left; width: 100%;">
        <span class="daohang" style="" align="center" @click="changeRoute('info')"><svg class="icon" aria-hidden="true"><use xlink:href="#actionshenqingguanli"></use></svg><div style="margin-top: 8px;">入库申请</div></span>
      </div>
    </div>
<!--    <div v-has="'cont:professor'">
      <div style="width: 33.3%; float: left" align="center" @click="changeRoute('info')"><img src="/info.jpg" alt=""></div>
      <div style="width: 33.3%; float: left" align="center" @click="changeRoute('project')"><img src="/project.jpg" alt=""></div>
      <div style="width: 33.3%; float: left" align="center" @click="changeRoute('leave')"><img src="/qingjia.jpg" alt=""></div>
    </div>
    <div v-has="'cont:demoProfessor'">
      <div style="width: 100%; float: left" align="center" @click="changeRoute('post')"><img src="/ruku.gif" alt=""></div>
    </div>-->
  </div>
  <a-card :body-style="{padding:'5%'}" :bordered="false">
    <div slot="title" class="index-md-title" style="">
      <img src="/公告.png" style="height:24px;"/>
     <span style="font-size: 16px">系统公告</span>
    </div>

    <div>

      <a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="listData">
        <!--<div slot="footer"><b>ant design vue</b> footer part</div>-->
        <a-list-item class="test" slot="renderItem" key="item.title" slot-scope="item, index">
<!--          <template v-for="{type} in userIcon" slot="actions">-->
<!--        <span :key="type">-->
<!--          <a-icon :type="type" style="margin-right: 1px" />-->
<!--          {{ item.createBy }}-->
<!--        </span>-->
<!--          </template>-->
<!--          <img
            slot="extra"
            width="200"
            alt=""
            :src="item.noticeImg == null? 'https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png':item.noticeImg"
            @click="showModal(index)"
          />-->
<!--          <template v-for="{ type} in historyIcon" slot="actions">-->
<!--            <span :key="type">-->
<!--              <a-icon :type="type" style="main-right: 1px" />-->
<!--              {{ item.createTime }}-->
<!--            </span>-->
<!--          </template>-->
          <div @click="showModal(index)" v-if='item.noticeStatus==1'>
            <a-list-item-meta>
              <!--
              introduction

              <a-list-item-meta :description="item.noticeIntroduction">
              -->
                <a slot="title"><div style="height: 8px;">&nbsp;</div>{{ item.noticeTitle.substring(0,10) }}<span v-if="item.noticeTitle.length>10">···</span><br/><span style="color: #c5c0cd; font-size: 13px">{{item.createTime}}</span></a>
                <a-avatar slot="avatar" shape="square" :size="64" :src="item.noticeImg == null? 'https://s1.ax1x.com/2020/09/25/09csOO.th.png':item.noticeImg"/>

            </a-list-item-meta>
            <!--      {{ item.content }}-->
          </div>
        </a-list-item>
      </a-list>

      <a-modal v-model="visible" :title="this.currentData.noticeTitle" @ok="handleOk" :footer="false" width="90%">
        <div v-html='this.currentData.noticeText'>

        </div>
      </a-modal>
    </div>
  </a-card>

</div>
</template>
<script>
import { getAction } from '@/api/manage';
import { mixinDevice } from '@/utils/mixin.js';
export default {
  mixins: [mixinDevice],
  components:{
    getAction,
  },
  data() {
    return {
      arr01:[],
      visible: false,
      listData:[],
      pagination: {
        onChange: page => {
          this.pagination.current = page
          /*
             post pageSize and current to get new data
          *
          */
          getAction(this.url,{pageNo:page,pageSize: this.pagination.pageSize}).then((res)=>{
            this.listData = res.result.records
            /*
            set total
            */
            this.pagination.total = res.result.total
          })
        },
        pageSize: 10,
        simple:true,
        size:'small',
        total:0,
        current:1,
      },
      userIcon: [
        { type: 'user', text: 'xxx' },
      ],
      historyIcon: [
        { type: 'history', text: 'xxx' },
      ],

      url:'org/notice/list',
      url02:'/123/diyIndexPicter/list02',

      currentData:{}
    };
  },
  created() {
    getAction(this.url).then((res)=>{
      if (res.success){
        this.listData = res.result.records
        /*set total*/
        this.pagination.total = res.result.total
      }
    })
    getAction(this.url02).then((res)=>{
      if (res.success){
        let arr= res.result.records
        for (let i = 0; i < arr.length; i++) {
          this.arr01.push(window._CONFIG['domianURL']+"/sys/common/static/"+arr[i].indexPicterString)
        }
      }
    })
  },
  methods:{
    changeRoute(page){
      if (page=='info'){
        this.$router.push({name:'diy-diyTempStep-StepFrom'})
      }else if (page=='post'){
        this.$router.push({name:'diy-diyProfessorStep-StepFrom'})
      }else if(page=='project'){
        this.$router.push({name:'diy-MyProfessorProject'})
      }else if(page=='leave'){
        this.$router.push({name:'diy-ProfessorUrgentLeave'})
      }
    },
    showModal(id) {
      this.currentData = this.listData[id]
      this.visible = true;
    },
    handleOk(e) {
      this.visible = false;
    },
  }
};
</script>
<style scoped>
.test>ul{
  margin-top: -100px;
}
  /* For demo */
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
  .index-md-title{
    postion:relative;
    padding-left:44px;
    width: 100%;
    color: black;
    font-size: 21px;
    font-family: cursive;
  }
  .index-md-title img{
    position: absolute;
    height:32px;
    top: 15px;
    left:32px;
  }
  .daohang{
    width: 55px;
    height: 55px;
    /*background-color: #fd8700;*/
    border-radius:50%;
    /*float: left;*/
    /*margin-left: 5%;*/
  }
  .daohang>div{
    font-size: 13px;
  }
.icon {
  width: 3em;
  height: 3em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

<style>
.test{
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
.ant-card-head-title{
  padding: 10px 0 !important;
}
</style>